<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div>
        <img :src="item.img" alt="" />
        <div class="content">
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.desc }}</p>
          <p class="price"><span>￥</span>{{ item.price }}</p>
          <p class="num">库存:{{ item.num }}</p>
        </div>
      </div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        @click="router.push('/car')"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="addlist"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script lang='ts' setup>
import { getitemlist, addcarlist } from "../../../api/api";
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

// 获取id
let id: any = route.params.id;

// 数据
let list: any = ref({});

onMounted(() => {
  render();
});

// 渲染
const render = () => {
  getitemlist(id).then((res) => {
    list.value = res.data.data;
  });
};

// 点击添加购物车执行的函数
const addlist = () => {
  addcarlist(list.value[0]).then((res) => {
    if (res.data.code == 1) {
      router.push("/car");
    }
  });
};

// 点击返回执行的函数
const onClickLeft = () => {
  router.go(-1);
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
  height: 300px;
}
p {
  padding: 5px;
  margin-left: 10px;
}
.name {
  font-weight: bold;
  font-size: 16px;
}
.desc {
  color: #7c7c7c;
}
.price {
  color: red;
  font-size: 17px;
  float: left;
}
.price span {
  font-size: 12px;
}
.num {
  font-size: 13px;
  margin-right: 10px;
  color: #7c7c7c;
  float: right;
}
.content {
  border-top: 1px solid #f1f1f1;
}
.van-action-bar {
  padding-right: 5 px;
}
</style>
